<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 
            媒体查询是css3中的新语法
                使用@media可以针对不同的屏幕尺寸设置不同的样式
            
            语法规范
                @media mediatype and | not | only (media feature) {
                    ...(正常写css就行了)
                }
                参数解析:
                    => 用@media开头, 注意@符号
                    => meidiatype就是媒体类型, 常见有 all(所有设备)、print(打印设备或打印预览)、scree(电脑屏幕、平板、智能手机等)
                    => 关键字 and(且)/not(非)/only(指定某个特定的媒体类型）
                    => media feature 媒体特性 必须有小括号包含
                        => width: 定义输出设备中页面可见区域的宽度
                        => min-width: 定义输出设备中页面可见区域的最小宽度
                        => max-width: 定义输出设备中页面可见区域的最大宽度
        */

        /* 
            示例, 这个案例下body的粉色只有在浏览器屏幕宽度在400-800的时候才会生效 
            而绿黄色会在801-1500下生效
            而紫色会在1501及以上时候生效
        */
        @media screen and  (max-width: 800px) and (min-width:400px){
            body{
                background-color: pink;
            }
        }

        @media screen and (min-width: 801px) and (max-width:1500px) {
            body{
                background-color: greenyellow;
            }
        }

        @media screen and (min-width: 1501px){
            body{
                background-color: blueviolet;
            }
        }
    </style>
</head>
<body>
    <div class="root"></div>
</body>
</html>